<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1, user-scalable=no, viewport-fit=cover"/>
    <title></title>
    <link rel="stylesheet" href="__INDEX__/css/mui.min.css">
    <!--App自定义的css-->


    <link rel="stylesheet" type="text/css" href="__INDEX__/css/app.css"/>
    <link rel="stylesheet" type="text/css" href="__INDEX__/index/css/index.css">
    <link rel="stylesheet" type="text/css" href="__INDEX__/index/css/swiper-4.3.5.min.css">
    <script type="text/javascript" src="__INDEX__/index/js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="__INDEX__/index/js/swiper-4.3.5.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="__INDEX__/js/vue.js"></script>
    <script src="__INDEX__/js/vue.min.js"></script>
    <script src="__INDEX__/js/vue-resource.min.js"></script>
    <script type="text/javascript" src="__INDEX__/index/js/index.js"></script>
    <script src="__INDEX__/js/mui.min.js"></script>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>-->

    <style type="text/css">
        body {margin:0;}
        .navbar {
            overflow: hidden;
            background-color: #fff;
            position: fixed;
            bottom: 0;
            width: 100%;
            border-top: 0.5px solid #E4E4E4;
        }

        .navbar a {
            width: 20%;
            float: left;
            display: block;
            color: #999999;
            text-align: center;
            padding: 0px;
            text-decoration: none;
            font-size: 17px;
        }
        .main {
            padding: 16px;
            margin-bottom: 30px;
            height: 1500px; /* Used in this example to enable scrolling */
        }
        .circle{  margin-left: -8px;}
        .mui-bar .mui-icon {
            font-size: 24px;
            position: relative;
            z-index: 20;
            padding-top: 10px;
            padding-bottom: 0px;
        }
    </style>

    <style>
        #close {
            position: absolute;
            width: 160px;
            left: 50%;
            margin-left: -80px;
            bottom: 15%;
            padding: 10px;
            color: #f0ad4e;
            border-color: #fff;
        }

        .item-logo {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .animate {
            position: absolute;
            left: 0;
            bottom: 15%;
            height: 0px;
            width: 100%;
            color: #fff;
            display: -moz-box;
        }

        .animate h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .animate li {
            width: 50%;
            height: 30px;
            line-height: 30px;
            list-style: none;
            font-size: 16px;
            text-align: right;
        }

        .animate li:nth-child(3) {
            text-align: left;
            float: right;
        }

        .animated {
            -webkit-animation-duration: 1s;
            -webkit-animation-play-state: paused;
            -webkit-animation-fill-mode: both;
        }

        .guide-show .bounceInDown {
            -webkit-animation-name: bounceInDown;
            -webkit-animation-play-state: running;
            -webkit-animation-delay: 1s;
            display: block;
        }

        .guide-show .bounceInLeft {
            -webkit-animation-name: bounceInLeft;
            display: block;
            -webkit-animation-play-state: running;
        }

        .guide-show .bounceInRight {
            -webkit-animation-name: bounceInRight;
            display: block;
            -webkit-animation-play-state: running;
            -webkit-animation-delay: 0.5s;
        }

        @-webkit-keyframes bounceInDown {
            0%, 60%, 75%, 90%, 100% {
                -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0, -3000px, 0);
                transform: translate3d(0, -3000px, 0);
            }
            60% {
                opacity: 1;
                -webkit-transform: translate3d(0, 25px, 0);
                transform: translate3d(0, 25px, 0);
            }
            75% {
                -webkit-transform: translate3d(0, -5px, 0);
                transform: translate3d(0, -5px, 0);
            }
            90% {
                -webkit-transform: translate3d(0, 3px, 0);
                transform: translate3d(0, 3px, 0);
            }
            100% {
                -webkit-transform: none;
                transform: none;
            }
        }

        @-webkit-keyframes bounceInLeft {
            0%, 60%, 75%, 90%, 100% {
                -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }
            0% {
                opacity: 0;
                -webkit-transform: translate3d(-3000px, 0, 0);
                transform: translate3d(-3000px, 0, 0);
            }
            60% {
                opacity: 1;
                -webkit-transform: translate3d(25px, 0, 0);
                transform: translate3d(25px, 0, 0);
            }
            75% {
                -webkit-transform: translate3d(-10px, 0, 0);
                transform: translate3d(-10px, 0, 0);
            }
            90% {
                -webkit-transform: translate3d(5px, 0, 0);
                transform: translate3d(5px, 0, 0);
            }
            100% {
                -webkit-transform: none;
                transform: none;
            }
        }

        @-webkit-keyframes bounceInRight {
            0%, 60%, 75%, 90%, 100% {
                -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }
            0% {
                opacity: 0;
                -webkit-transform: translate3d(3000px, 0, 0);
                transform: translate3d(3000px, 0, 0);
            }
            60% {
                opacity: 1;
                -webkit-transform: translate3d(-25px, 0, 0);
                transform: translate3d(-25px, 0, 0);
            }
            75% {
                -webkit-transform: translate3d(10px, 0, 0);
                transform: translate3d(10px, 0, 0);
            }
            90% {
                -webkit-transform: translate3d(-5px, 0, 0);
                transform: translate3d(-5px, 0, 0);
            }
            100% {
                -webkit-transform: none;
                transform: none;
            }

        }
        #btnwsf{
            position: absolute;
            width: 160px;
            left: 50%;
            margin-left: -80px;
            bottom: 15%;
            color: #ffffff;
            padding: 10px;
            border-color: #ffffff;
            background-color: #102b3a;
        }
    </style>
</head>
<body>
<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
    <div class="mui-slider-group">
        <!-- 第三张 -->
        <div class="mui-slider-item">
            <div class="item-logo" style="background:url(__INDEX__/img/home-img.png);background-size:100% ;">
                <div class="animate">
                    <form class="mui-input-group1" style="background: none;text-align: center;">

                      <a onclick="gohome()">
                          <button type="button" id="btnwsf" class="mui-btn  mui-btn-outlined">立即体验</button>
                         </a>
                        <p style="margin-left: 50px;">  <br>
                         <a href="javascript:;"   onclick="window.location.href='{:url('/iAgreement')}'" >同意用户使用协议</a></p>

                        <div class="mui-input-row mui-checkbox mui-left" style="position: absolute;margin-left: 23%;margin-top: -38px;width: 50px;padding: 10px;" >
                            <label  style="border: none;"></label>
                            <input name="checkbox" value="" type="checkbox"  checked>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    var $body = $('body');
    document.title = '汉唐文化欢迎您!';
    var $iframe = $('');
    $iframe.on('load', function () {
        setTimeout(function () {
            $iframe.off('load').remove();
        }, 0);
    }).appendTo($body);
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });

    var value = ''

    mui('.mui-input-group1').on('change', 'input', function () {
        value = this.checked ? "true" : "false";
        //console("123"+value);
    });
    function gohome() {
        if(value){
            mui.alert('请同意汉唐文化用户使用协议！', '汉唐文化协议', function() {

            });
        }else {
            window.location.href="{:url('/')}";
        }
    }
</script>
</body>

</html>